<template>
  <div style="
    z-index: 0;
    position: absolute;
    background-color: rgba(0, 186, 173, 1);
    width:100vw;
    height: 38.19vh;
    top:0;"></div>
  <div style="
    width: 100vw;
    height: 100vh;
    display: table;">
    <div style="
      position: relative;
      vertical-align: middle;
      display: table-cell;">
        <div style="
          margin: auto;
          width: 100vw;
          text-align:center;
          z-index: 0;
          position: absolute;
          color: rgba(80, 80, 80, 1);
          font-size: 14px;
          bottom: 40px;"><span>Copyright&nbsp;&nbsp;2021&nbsp;中国医科大学公共卫生学院&nbsp;&nbsp;辽宁省沈阳市沈北新区蒲河路77号</span></div>
      <div style="
        position: relative;
        top: -71px;
        width:700px;
        height: 467px;
        margin: auto;
        color: rgba(80, 80, 80, 1);
        background-color: rgba(255, 255, 255, 0);
        border-radius: 4px;
        font-size: 14px;
        line-height: 150%;
        ">
        <div style="
          display: flex;
          height: 42px;
          ">
          <img src='/logo.png' style="padding-right: 15px; width: 127px;"/>
          <span style="
            font-size: 32px;
            line-height: 35px;
            text-align: left;
            color: rgba(255, 255, 255, 1);
            font-weight: bold;">综合运营管理系统</span>
        </div>
        <div style="height: 31px;"></div>
        <div style="
          border: 1px solid blue;
          width:700px;
          height: 467px;
          margin: auto;
          color: rgba(80, 80, 80, 1);
          background-color: rgba(255, 255, 255, 1);
          border-radius: 4px;
          font-size: 14px;
          line-height: 150%;
          border: rgba(220, 225, 230, 1) solid 1px;">
          <div v-if="isFogot" @click="isFogot=false" style="
            z-index:1;
            position: absolute;
            padding: 15px;">
            <i class="material-icons icon iconfont" style="position: relative; font-size: 20px; margin-top: 9px; left: 10px; color: rgba(0, 186, 173, 1); margin-bottom: 0px;">arrow_back</i></div>
          <div style="
            position: relative;
            width: 150px;
            border-bottom: rgba(0, 186, 173, 1) solid 1px;
            left: 65px;
            top: 65px;">
            <span style="text-align: center; display: block; padding: 10px 0 10px 0; color: rgba(0, 186, 173, 1);" v-if="!isFogot">
              用户登录</span>
            <span style="text-align: center; display: block; padding: 10px 0 10px 0; color: rgba(0, 186, 173, 1);" v-else>
              找回密码</span>
              </div>
          <div id="divForm"><el-form v-show="!isFogot"><!-- :label-width="'60px'"-->
        <el-form-item>
          <el-input placeholder="用户名" v-model="username" autocomplete="nope"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input id="passwordInput" placeholder="密码" v-model="password" :type="password" :show-password=true autocomplete="nope"></el-input>
        </el-form-item>
        <el-form-item style="margin-top:-10px;">
          <el-checkbox style="float: left;" v-model="chooseSavePassword" label="记住密码"></el-checkbox>
          <span style="
            color: rgba(0, 186, 173, 1);
            font-size: 14px;
            float: right;" @click="isFogot=!isFogot">忘记密码?</span>
        </el-form-item>
        <el-form-item>
        <el-button @click="login" style="
          width: -webkit-fill-available;
          color: rgba(255, 255, 255, 1);
          background-color: rgba(0, 186, 173, 1);
          font-size: 16px;
          margin-top:-10px;
          ">登录</el-button></el-form-item>

      </el-form>
      <el-form :model="form" v-show="isFogot" style="position:relative; top:-10px;"><!-- :label-width="'60px'"-->
        <el-form-item>
          <el-input placeholder="请输入邮箱" v-model="username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input style="width: 45%; float:left;" placeholder="验证码" v-model="verifyCode" autocomplete="nope"></el-input>
          <el-button style="position: relative;width: 45%; text-align: center; float: right; box-shadow: 0px 4px 4px 0px rgba(229, 229, 229, 1);">获取验证码</el-button>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入新密码" v-model="passwordNew" autocomplete="nope"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="再次输入新密码" v-model="passwordNew2" autocomplete="nope"></el-input>
        </el-form-item>

      </el-form></div>
          <div style="
          position: relative;
      font-size: 14px;
      text-align: left;
      line-height: 200%;
      padding: 0 51px;
      width: calc(100% - 420px);
      display: table;
      height:100%;
      top: -40px;
      ">
      <div style="
        vertical-align: middle;
        display: table-cell;">
      <p style="
        height: 21px;
        color: rgba(80, 80, 80, 1);
        font-size: 14px;
        line-height: 150%;
        margin-bottom:0;">还没有账号：</p>
      <p style="
        height: 21px;
        color: rgba(0, 186, 173, 1);
        font-size: 14px;
        line-height: 150%;
        text-align: left;
        margin-top: 9px;
        margin-bottom:0;
        float: left;">联系管理员</p>
        <i class="material-icons icon iconfont" style="position: relative; font-size: 20px; margin-top: 9px; left: 10px; color: rgba(0, 186, 173, 1); margin-bottom: 0px;">arrow_forward</i>
      <p v-if="!isFogot" style="
        height: 21px;
        color: rgba(80, 80, 80, 1);
        font-size: 14px;
        line-height: 150%;
        margin-top: 17px;
        margin-bottom:0;">备注：</p>
      <p v-if="!isFogot" style="
        height: 56px;
        color: rgba(212, 48, 48, 1);
        font-size: 14px;
        line-height: 200%;
        text-align: left;
        margin-top: 9px;
        margin-bottom:0;">用户名为工号或手机号；<br>密码为OA系统密码。</p>
        
        <el-button v-if="isFogot" style="
          width:100%;
          width: -webkit-fill-available;
          color: rgba(255, 255, 255, 1);
          background-color: rgba(0, 186, 173, 1);
          font-size: 16px;
          margin: 51px 0 10px 0;
          ">重置密码</el-button>
        </div>
    </div>
          </div>
        </div>
    </div>
  </div>
</template>

<style scoped>

el-input{
  border-color: #ccc;
}
#divForm{
  position: relative;
  width: 420px;
  top: 111px;
  padding: 0 55px 0 65px;
  float: left;
}
#divForm::before{
  content: " ";
  position: absolute;
  top: -75px;
  left: 0;
  right: 0;
  height: 300px;
  border-right: 1px solid rgba(229, 229, 229, 1);
  border-top-width: 0;
}
</style>

<script>
import { mapMutations } from "vuex";
import md5 from 'js-md5';

export default {
  data () {
    return {
      username: this.$store.state.username,
      passwordMD5: this.$store.state.passwordMD5,
      password: "",
      passwordPlaceholder: "密码",
      message: "",
      isFogot: false,
      chooseSavePassword: this.$store.state.chooseSavePassword,
      verifyCode: "",
      passwordNew: "",
      passwordNew2: "",
    };
  },
  mounted(){
    if (this.passwordMD5!="d41d8cd98f00b204e9800998ecf8427e"){
      document.getElementById("passwordInput").setAttribute("placeholder", "（密码已保存）");
    }
  },
  methods: {
    ...mapMutations(["setUser", "setToken", "set_usernameSave", "set_passwordMD5Save", "set_chooseSavePassword"]),
    async login() {
      if (this.passwordMD5=="d41d8cd98f00b204e9800998ecf8427e"){
        this.passwordMD5= md5(this.password)
        this.set_passwordMD5Save(md5(this.password));
      }
      const response = await fetch("http://82.156.0.223:3001/login", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          username: this.username,
          password: this.passwordMD5,
        }),
      });
      const { user, token } = await response.json();
      if (user!=undefined && token!=undefined){
        this.setUser(user);
        this.setToken(token);
        if (this.chooseSavePassword===false){
          this.password= "";
          this.set_usernameSave(this.username);
          this.set_passwordMD5Save(md5(this.password));
          this.set_chooseSavePassword(this.chooseSavePassword)
        } else {
          this.set_usernameSave(this.username);
          this.set_chooseSavePassword(this.chooseSavePassword)
        }
        this.$router.push("/");
      } else {
        this.message='用户名或密码错误'
      }
    },

    fogot(){

    }
  },
};

</script>